<template>
    <div class="loginLog-manage">
        <div class="query-form">
            <el-form ref="form" :inline="true" :model="queryForm">
                <el-form-item label="用户账号" prop="username">
                    <el-input v-model="queryForm.username" placeholder="请输入用户名称" />
                </el-form-item>
                <el-form-item label="登陆IP" prop="ipaddr">
                    <el-input v-model="queryForm.ipaddr" placeholder="请输入登陆IP" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="handleReset('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <div class="action">
                <el-button type="danger" @click="handlePatchDelete">批量删除</el-button>
            </div>
            <el-table :data="loginLogList" @selection-change="handleSelectionChange" border cell-style="padding: 4px 0"
                max-height="600">
                <el-table-column type="selection" width="40" align="center" />
                <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
                    :width="item.width" :formatter="item.formatter" align="center" />
                <el-table-column label="操作" width="100" align="center">
                    <template #default="scope">
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagination" background layout="prev, pager, next" :total="pager.totalCount"
                :page-size="pager.pageSize" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from 'vue'
import utils from "../utils/utils";
export default {
    name: 'loginLog',
    setup() {
        //获取Composition API上下文对象
        const { ctx, proxy } = getCurrentInstance();
        //初始化登录日志表单对象
        const queryForm = reactive({});
        //初始化登录日志列表数据
        const loginLogList = ref([]);
        //初始化分页对象
        const pager = reactive({
            pageNum: 1,
            pageSize: 10
        });
        //选中登录日志列表的对象
        const checkedLoginLogIds = ref([]);
        //弹框显示对象
        const showModal = ref(false);
        //新增登录日志表单对象
        const loginLogForm = reactive({});
        //定义登录日志操作行为
        const action = ref('add');
        //定义动态表格格式
        const columns = reactive([
            {
                label: "用户账号",
                prop: "username",
                width: 150,
            },
            {
                label: "登录IP",
                prop: "ipaddr"
            },
            {
                label: "登录地点",
                prop: "loginLocation"
            },
            {
                label: "访问来源",
                prop: "loginSource",
                formatter(row, column, value) {
                    return {
                        1: '安卓端',
                        2: '苹果端',
                        3: '平台端'
                    }[value]
                }
            },
            {
                label: "浏览器",
                prop: "browser",
            },
            {
                label: "操作系统",
                prop: "os",
            },
            {
                label: "提示消息",
                prop: "msg",
                width: 200,
            },
            {
                label: "登录状态",
                prop: "status",
                width: 80,
                formatter(row, column, value) {
                    return {
                        1: '成功',
                        0: '失败'
                    }[value]
                }
            },

            {
                label: "登录时间",
                prop: "loginTime",
                formatter(row, column, value) {
                    return utils.formateDate(new Date(value));
                }
            }
        ]);
        //初始化接口调用
        onMounted(() => {
            getLoginLogList();
        })
        // 获取登录日志列表
        const getLoginLogList = async () => {
            let params = { ...queryForm, ...pager };
            try {
                const { list, total } = await proxy.$api.getLoginLogList(params);
                loginLogList.value = list;
                pager.totalCount = total;
            } catch (error) {
                console.log(proxy.$api);
            }
        };
        //查询事件，获取登录日志列表
        const handleQuery = () => {
            getLoginLogList();
        }
        // 重置查询表单
        const handleReset = (form) => {
            proxy.$refs[form].resetFields();
            getLoginLogList();
        };
        // 分页事件处理
        const handleCurrentChange = (current) => {
            pager.pageNum = current;
            getLoginLogList();
        };
        //表格多选
        const handleSelectionChange = (list) => {
            let arr = [];
            list.map(item => {
                arr.push(item.loginId);
            })
            checkedLoginLogIds.value = arr;
        }
        //批量删除
        const handlePatchDelete = async () => {
            if (checkedLoginLogIds.value.length == 0) {
                proxy.$message.error('请选择要删除的设备');
                return;
            }
            const res = await proxy.$api.loginLogDelete({
                loginLogIds: checkedLoginLogIds.value
            })
            if (res.rows > 0) {
                proxy.$message.success('删除成功');
                getLoginLogList();
            } else {
                proxy.$message.error('删除失败');
            }

        };
        //登陆日志单个删除
        const handleDelete = async (row) => {
            await proxy.$api.loginLogDelete({
                loginLogIds: [row.loginId]
            })
            proxy.$message.success('删除成功');
            getLoginLogList();
        };
        return {
            queryForm,
            loginLogList,
            columns,
            pager,
            checkedLoginLogIds,
            showModal,
            loginLogForm,
            action,
            getLoginLogList,
            handleQuery,
            handleReset,
            handleCurrentChange,
            handleSelectionChange,
            handlePatchDelete,
            handleDelete
        }
    }
}
</script>

<style lang="scss"></style>